<template>
	<view class="dynamic-comment-item">
		<!-- S 顶部信息 -->
		<view class="dynamic-comment-item_header">
			<sol-avatar class="header-left" :src="info.user.avatar" :gender="info.user.gender" size="sm"></sol-avatar>
			<view class="header-in">
				<text class="header-in_name" v-text="info.user.nickname">昵称</text>
				<text class="header-in_time" v-text="info.datetime">时间</text>
			</view>
			<view class="header-right">
				<text class="header-right_text" v-text="info.praiseCount">0</text>
				<image class="header-right_icon"
					:src="`/static/icon-dynamic/icon_praise_${info.userPraise ? 'full':'out'}.png`" mode="scaleToFill">
				</image>
			</view>
		</view>
		<!-- E 顶部信息 -->
		<view class="dynamic-comment-item_content" v-if="info.content">内容</view>
		<!-- S 子留言 -->
		<view class="dynamic-comment-item_subset">
			<view class="subset-item" v-for="reply in info.replyList" :key="reply.id">
				<text class="subset-item_name">
					{{reply.user.nickname || 'Ta'}}
					<template v-if="reply.replyId">
						回复{{reply.replyUser.nickname || 'Ta'}}
					</template>：
				</text>
				<text class="subset-item_content" v-text="reply.content">回复内容</text>
			</view>
			<view class="subset-more">查看{{info.commentCount || 0}}条留言></view>
		</view>
		<!-- E 子留言 -->
	</view>
</template>

<script>
	/**  
	 * 动态留言项组件
	 * @property {Object} mode 裁剪模式  
	 * @property {Object} lazy 懒加载  
	 * @property {Object} src 图片地址  
	 * @property {Object} src-error 图片占位图  
	 * @event {Function} click 点击事件  
	 * @event {Function} error 发生错误加载事件  
	 */
	export default {
		name: 'dynamic-comment-item',

		props: {
			// 懒加载
			lazy: {
				type: Boolean,
				default: false
			},
			// 图片地址
			src: {
				type: String,
				default: '/static/icon-default/icon_logo.png'
			},
			// 错误占位图片地址
			srcError: {
				type: String,
				default: '/static/icon-default/icon_avatar.png'
			},
			// 卡片信息
			info: {
				type: Object,
				default: () => {
					return {
						id: 1, // 留言ID
						datetime: "40分钟前", // 留言时间
						praiseCount: 13, // 点赞次数
						commentCount: 8, // 留言数
						content: "多数事并不如你想的那样一帆风顺，但你却因此成为了可以乘风破浪的人。",
						user: {
							uid: 1,
							gender: 2,
							nickname: '冰可乐',
							avatar: '/static/icon-default/icon_avatar.png',
						},
						userPraise: 0, // 用户是否点赞 0 1
						replyList: [{
								id: 2, // 留言ID
								user: {
									uid: 2,
									nickname: '大皮蛋',
								},
								content: '终于等到了结局，遇到让人一切甘愿内心笃定的人',
								parentId: 1, // 父节点Id
								replyId: 0, // 回复Id
								replyUid: 0, // 回复用户Id
								replyUser: null, // 回复用户
							},
							{
								id: 3, // 留言ID
								user: {
									uid: 3,
									nickname: '大皮蛋',
								},
								content: '终于遇到一切的人',
								parentId: 1, // 父节点Id
								replyId: 2, // 回复Id
								replyUid: 2, // 回复用户Id
								replyUser: { // 回复用户
									uid: 2,
									nickname: '大皮蛋',
								},
							}
						]
					}
				}
			},
		},

		data() {
			return {
				// 图片是否加载错误，占位图
				isError: false,
			};
		},

		computed: {
			// 计算改变图片地址
			calcSrc() {
				// 套上尺寸
				let subset = this.subset;
				return subset;
			}
		},

		methods: {
			// 点击图片
			$_click() {
				this.$emit('click');
			},
			// 图片加载失败
			$_error(err) {
				this.isError = true;
				this.$emit('error', err);
			},
		}
	}
</script>

<style scoped lang="scss">
	.dynamic-comment-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 28rpx;

		// 头部
		&_header {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 100%;

			.header-in {
				margin-left: 28rpx;
				flex-grow: 1;

				&_name {
					font-size: 28rpx;
					font-weight: bold;
					color: #BBBBBB;
				}

				&_time {
					font-size: 24rpx;
					font-weight: 400;
					color: #878787;
					margin-left: 24rpx;
				}
			}

			.header-right {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				&_text {
					font-size: 24rpx;
					font-weight: 400;
					color: #DDDDDD;
				}

				&_icon {
					width: 32rpx;
					height: 32rpx;
					padding: 18rpx 24rpx;
				}
			}
		}

		// 内容
		&_content {
			font-size: 32rpx;
			font-weight: 400;
			color: #DDDDDD;
			letter-spacing: 2rpx;
			margin-left: 96rpx;
			margin-right: 36rpx;
			margin: 24rpx 36rpx 24rpx 96rpx;
		}

		// 子集留言
		&_subset {
			border-radius: 18rpx;
			padding: 18rpx;
			background: #474e54;
			margin-left: 96rpx;
			margin-right: 36rpx;

			.subset {
				&-item {
					line-height: 42rpx;
					margin-bottom: 12rpx;

					&_name {
						font-size: 32rpx;
						font-weight: bold;
						color: #bbbbbb;
					}

					&_content {
						font-size: 28rpx;
						font-weight: 400;
						color: #a2a4a6;
						letter-spacing: 4rpx;
					}
				}

				&-more {
					font-size: 28rpx;
					font-weight: 400;
					color: #607d8b;
					letter-spacing: 4rpx;
					margin-top: 18rpx;
				}
			}
		}
	}
</style>
